<template>
  <el-dialog :close-on-click-modal="false" title="工具选择框" :visible.sync="modal" width="600px" @close="resetForm('dynamicValidateForm')" :before-close="handleClose">
    <div>
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="60px" class="demo-dynamic">
        <el-row>
          <el-col :span="24" v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.commonId">
            <el-col :span="10">
              <el-form-item :label="'工具'" :prop="'domains.' + index + '.commonId'" :rules="{
                required: true, type: 'number' , message: '工具不能为空', trigger: 'change'
                }">
                <el-select v-model="domain.commonId" placeholder="请选择" style="width: 100%" @change="findName(domain.commonId, index)">
                  <el-option v-for="item in options" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item :label="'数量'" :prop="'domains.' + index + '.commonNum'">
                <el-input-number v-model="domain.commonNum" controls-position="right" :min="1" :max="10" style="width: 100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button @click.prevent="removeDomain(domain)" v-if="index>0">删除</el-button>
            </el-col>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="addDomain">新增工具</el-button>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <!--<el-button @click="resetForm('dynamicValidateForm')">重 置</el-button>-->
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm('dynamicValidateForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    deviceManagement
  } from "../../service/service_zbw";
  import { deepClone } from "../../lib/utils";
  export default {
    props: {
      data: {
        type: Array
      },
      isOpen: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        modal: this.isOpen,
        dynamicValidateForm: {
          domains: [{
            commonId: '',
            commonName: '',
          }],
          
        },
        options: [
        //   {
        //   value: '1',
        //   label: '黄金糕'
        // }, {
        //   value: '2',
        //   label: '双皮奶'
        // }, {
        //   value: '3',
        //   label: '蚵仔煎'
        // }, {
        //   value: '4',
        //   label: '龙须面'
        // }, {
        //   value: '5',
        //   label: '北京烤鸭'
        // }
        ],
        submitData: []
      }
    },
    methods: {
      async getTableData() {
        let param = {
          pageCurrent: 1,
          pageSize: 10000
        }
        let res = await deviceManagement.getTableData(param);
        if (res.success) {
          this.options = res.obj.items;
        } else {
          this.options = [];
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      },
      /**
       * 表单提交
       */
      submitForm: async function(formName) {
        await this.$refs[formName].validate((valid) => {
          if (valid) {
            let copyObj = deepClone(this.dynamicValidateForm.domains);
            for(let i = 0; i < copyObj.length; i++){
              if(!copyObj[i].commonNum){
                this.$message.error("设备数量有误！");
                return;
              }
            }
            this.handleClose(copyObj);
          }
        });
      },
      /**
       * 当前选中之的文字名称
       */
      findName(val, index) {
        let name = '';
        for (let i of this.options) {
          if (i.deviceId === val) {
            this.dynamicValidateForm.domains[index].commonId = i.deviceId;
            this.dynamicValidateForm.domains[index].commonName = i.deviceName;
            break;
          }
        }
        this.disabledData();
      },
      /**
       * 禁用已选数据
       */
      disabledData() {
        for (let i of this.options) {
          delete i.disabled;
          for (let j of this.dynamicValidateForm.domains) {
            if (j.commonId === '') {
              return;
            }
            if (i.value === j.commonId) {
              i.disabled = true;
            }
          }
        }
      },
      /**
       * 删除可选框
       */
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      /**
       * 增加可选框
       */
      addDomain() {
        this.dynamicValidateForm.domains.push({
          commonId: '',
          commonNum: '',
        });
      },
      /**
       * 取消操作
       */
      cancel() {
        if (this.data.length <= 0) {
          this.dynamicValidateForm = {
            domains: [{
              commonId: '',
              commonName: '',
            }]
          };
          this.submitData = [];
        } else {
          this.submitData = deepClone(this.data);
        }
        this.handleClose(this.submitData);
      },
      /**
       * 关闭模态框
       */
      handleClose(val) {
        this.modal = false;
        let param = {
          modal: this.modal,
          value: [],
          status: false
        };
        if (val && val instanceof Array) {
          param.value = val;
          param.status = true;
        }
        this.$emit('modalClose', param);
      },
      /**
       * 清空表单
       */
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    watch: {
      /**
       * 监听模态框开启状态
       */
      isOpen(newval) {
        if (newval) {
          this.getTableData();
          this.modal = newval;
          //开启时将已选数据回显
          if (this.data.length > 0) {
            this.dynamicValidateForm.domains = deepClone(this.data);
          } else {
            this.dynamicValidateForm = {
              domains: [{
                commonId: '',
                commonName: '',
              }]
            };
          }
          this.disabledData();
        }
      }
    }
  }

</script>

<style scoped>


</style>

